import 'dart:io';

import 'package:flutter/material.dart';
import 'package:gold/model/order_model.dart';
import 'package:gold/ui/my/order/apply_refund_viewmodel.dart';
import 'package:gold/ui/my/order/order_config.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/oval_image.dart';
import 'package:gold/widgets/xfg_text.dart';

/// @description: 申请退款
/// @author tangzhentao
/// @created at 13:26 2024/12/14

class ApplyRefundPage extends StatelessWidget {
  /// 订单信息
  final OrderModel order;

  const ApplyRefundPage({super.key, required this.order});

  @override
  Widget build(BuildContext context) {
    final prices = ((order.payPrice?? 0.00) + (order.amountNum?? 0.00)).toStringAsFixed(2).split('.');
    final points = order.pointsNum?? 0;
    return ProviderScaffold<ApplyRefundViewmodel>(
      resizeToAvoidBottomInset: false,
      appBar: (_) => xfgAppbar(title: '申请退款'),
      model: ApplyRefundViewmodel(order),
      builder: (ctx, refund) => SingleChildScrollView(
        padding: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size10, XfgSize().size10, XfgSize().bottomBarHeight == 0 ? XfgSize().size10:XfgSize().bottomBarHeight),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            /// 退款原因和金额
            Container(
              decoration: white6Decoration,
              child: Column(
                children: [
                  GestureDetector(
                    onTap: refund.pickRefundReason,
                    child: Container(
                      height: XfgSize().size52,
                      padding: EdgeInsets.symmetric(horizontal: XfgSize().size10),
                      child: Row(
                        children: [
                          XfgText('退款原因', fontSize: XfgSize().text16, color: XfgColor.text1D, bold: FontWeight.bold, children: [
                            TextSpan(text: '*', style: TextStyle(fontSize: XfgSize().text16, color: XfgColor.theme))
                          ]),
                          SizedBox(width: XfgSize().size10),
                          Expanded(
                            child: Container(
                              padding: EdgeInsets.symmetric(horizontal: XfgSize().size10),
                              alignment: Alignment.centerRight,
                              child: Builder(builder: (con) {
                                final reason = con.select<ApplyRefundViewmodel, RefundReason?>((k) => k.reason);
                                return XfgText(reason?.desc?? '请选择', fontSize: XfgSize().text14, color: XfgColor.text2);
                              }),
                            ),
                          ),
                          Image.asset(Res.imagesArrowRight, width: XfgSize().size8, height: XfgSize().size15)
                        ],
                      ),
                    ),
                  ),
                  strokeHeightContainer,
                  Container(
                    padding: EdgeInsets.only(left: XfgSize().size10, top: XfgSize().size15),
                    alignment: Alignment.centerLeft,
                    child: XfgText('退款金额', fontSize: XfgSize().text16, color: XfgColor.text1D, bold: FontWeight.bold, children: [
                      TextSpan(text: '*', style: TextStyle(fontSize: XfgSize().text16, color: XfgColor.theme))
                    ]),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: XfgSize().size10, top: XfgSize().size15),
                    alignment: Alignment.centerLeft,
                    child: XfgText('¥', fontSize: XfgSize().text12, color: XfgColor.theme, bold: FontWeight.bold, children: [
                      TextSpan(text: '${prices.first}.', style: TextStyle(fontSize: XfgSize().text20)),
                      TextSpan(text: prices.last, style: TextStyle(fontSize: XfgSize().text16)),
                    ]),
                  ),
                  Container(
                    margin: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size10, XfgSize().size10, 0),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: XfgSize().size14),
                      height: XfgSize().size34,
                      decoration: BoxDecoration(color: XfgColor.background, borderRadius: BorderRadius.circular(XfgSize().size6)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          XfgText('退回积分', fontSize: XfgSize().text14, color: XfgColor.text1),
                          XfgText('$points个', fontSize: XfgSize().text14, color: XfgColor.text1),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(height: XfgSize().size15)
                ],
              ),
            ),
            /// 退货方式
            Container(
              margin: EdgeInsets.only(top: XfgSize().size10),
              decoration: white6Decoration,
              padding: EdgeInsets.symmetric(horizontal: XfgSize().size10, vertical: XfgSize().size20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      XfgText('退货方式', fontSize: XfgSize().text16, color: XfgColor.text1D, bold: FontWeight.bold, children: [
                        TextSpan(text: '*', style: TextStyle(fontSize: XfgSize().text16, color: XfgColor.theme))
                      ]),
                      XfgText('仅退款', fontSize: XfgSize().text14, color: XfgColor.text2),
                    ],
                  ),
                  SizedBox(height: XfgSize().size14),
                  XfgText('快递员上门取件，免填地址，自动回单', color: XfgColor.theme)
                ],
              ),
            ),
            /// 退货描述
            Container(
              margin: EdgeInsets.only(top: XfgSize().size8),
              padding: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size18, XfgSize().size10, XfgSize().size10),
              decoration: white6Decoration,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  XfgText('补充描述和凭证', fontSize: XfgSize().text16, color: XfgColor.text1D, bold: FontWeight.bold),
                  Container(
                    margin: EdgeInsets.only(top: XfgSize().size10),
                    padding: EdgeInsets.fromLTRB(XfgSize().size15, XfgSize().size15, XfgSize().size10, XfgSize().size10),
                    decoration: BoxDecoration(color: XfgColor.background, borderRadius: BorderRadius.circular(XfgSize().size6)),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        SizedBox(
                          height: XfgSize().size70,
                          child: TextField(
                            controller: refund.controller,
                            focusNode: refund.focusNode,
                            maxLines: 999,
                            keyboardType: TextInputType.text,
                            maxLength: 200,
                            onChanged: (text) => refund.length = text.length,
                            style: TextStyle(color: XfgColor.text1, fontWeight: FontWeight.bold, height: Platform.isIOS?1:null),
                            decoration: InputDecoration(
                              isCollapsed: true,
                              isDense: true,
                              border: InputBorder.none,
                              contentPadding: EdgeInsets.zero,
                              hintText: '补充描述，有助于商家更好的处理售后问题',
                              hintStyle: TextStyle(color: XfgColor.text3, height: Platform.isIOS?1:null),
                              counterText: ''
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: XfgSize().size10),
                          height: XfgSize().size54,
                          child: Builder(builder: (ctx) {
                            final photos = ctx.select<ApplyRefundViewmodel, List<AddPhoto>>((k) => k.photos);
                            return ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemCount: photos.length,
                                itemBuilder: (_, index) {
                                  final photo = photos[index];
                                  return Container(
                                    margin: EdgeInsets.only(left: index == 0 ? 0:XfgSize().size5),
                                    width: XfgSize().size54,
                                    height: XfgSize().size54,
                                    child: Stack(
                                      children: [
                                        Align(
                                          alignment: Alignment.bottomLeft,
                                          child: GestureDetector(
                                            onTap: photo.isAdd ? refund.addPhoto:null,
                                            child: OvalImage(photo.file.path, size: Size.square(XfgSize().size48), radius: BorderRadius.circular(XfgSize().size6)),
                                          ),
                                        ),
                                        Align(
                                          alignment: Alignment.topRight,
                                          child: Visibility(
                                            visible: !photo.isAdd,
                                            child: GestureDetector(
                                              onTap: () => refund.deletePhoto(index),
                                              child: Image.asset(Res.imagesAppraisePhotoDelete, width: XfgSize().size14, height: XfgSize().size14),
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  );
                                }
                            );
                          }),
                        ),
                        Builder(builder: (con) => XfgText('${con.select<ApplyRefundViewmodel, int>((k) => k.length)}/200', color: XfgColor.text3))
                      ],
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: XfgSize().size54),
            TextButton(
              onPressed: refund.submit,
              style: xfgButtonStyle(Size(XfgSize().size342, XfgSize().size50), radius: XfgSize().size50),
              child: XfgText('提交', fontSize: XfgSize().text20, color: XfgColor.white),
            )
          ],
        ),
      )
    );
  }

}
